﻿@{
		View.Title = "Index";
		Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<p>This is a temporary page. A component example browser will be build to show all components as they are avaiable.</p>
<br />
<p>As a sample, here is a button:</p>
@Html.Partial("Button")
<br />
<p><i>Partial view Button.cshtml:</i></p>
<pre style="font-family: consolas">
<span style="background: yellow">@@</span><span style="color: blue">using</span>&nbsp;MBA.FluentExt
<span style="background: yellow">@@</span><span style="color: blue">using</span>&nbsp;MBA.FluentExt.Ext

<span style="color: blue">&lt;</span><span style="color: maroon">script</span>&nbsp;<span style="color: red">type</span><span style="color: blue">=</span><span style="color: blue">&quot;text/javascript&quot;</span><span style="color: blue">&gt;</span>
	<span style="color: blue">function</span>&nbsp;btnSomething_Render(button)
	{
		setTimeout(<span style="color: blue">function</span>&nbsp;()
		{
			button.setText(<span style="color: maroon">&quot;Changed&nbsp;after&nbsp;3&nbsp;seconds&quot;</span>);
		},&nbsp;3000);
	}
<span style="color: blue">&lt;/</span><span style="color: maroon">script</span><span style="color: blue">&gt;</span>

<span style="background: yellow">@@</span><span style="color: #2b91af">X</span>.ExtScript(&nbsp;<span style="color: green">//&nbsp;Render&nbsp;the&nbsp;following&nbsp;components&nbsp;as&nbsp;a&nbsp;var&nbsp;&lt;id&gt;=new&nbsp;&lt;ctor&gt;(&lt;config&gt;);&nbsp;inside&nbsp;a&nbsp;&lt;script&gt;&nbsp;tag</span>
	<span style="color: #2b91af">X</span>.Button(<span style="color: #a31515">&quot;btnSomething&quot;</span>)&nbsp;<span style="color: green">//&nbsp;We&nbsp;are&nbsp;creating&nbsp;a&nbsp;button&nbsp;with&nbsp;id&nbsp;=&nbsp;btnSomething</span>
		.Text(<span style="color: #a31515">&quot;MyButton&quot;</span>)&nbsp;<span style="color: green">//&nbsp;This&nbsp;will&nbsp;be&nbsp;the&nbsp;button&nbsp;text</span>
		.ToAdvanced()&nbsp;<span style="color: green">//&nbsp;For&nbsp;some&nbsp;not-so-common&nbsp;config&nbsp;options,&nbsp;we&nbsp;toggle&nbsp;to&nbsp;advanced&nbsp;mode&nbsp;(you&nbsp;can&nbsp;revert&nbsp;this&nbsp;back&nbsp;using&nbsp;.ToBasic()).&nbsp;Notice&nbsp;that&nbsp;this&nbsp;exists&nbsp;only&nbsp;for&nbsp;a&nbsp;simplified&nbsp;intellisense.&nbsp;Both&nbsp;basic&nbsp;and&nbsp;advanced&nbsp;components&nbsp;are&nbsp;the&nbsp;same&nbsp;ExtJS&nbsp;Button.</span>
		.Scale(<span style="color: #2b91af">ButtonScale</span>.Large)&nbsp;<span style="color: green">//&nbsp;An&nbsp;advanced&nbsp;config&nbsp;option&nbsp;to&nbsp;set&nbsp;the&nbsp;button&nbsp;scale</span>
		.RenderTo(<span style="color: #a31515">&quot;divContainer&quot;</span>)&nbsp;<span style="color: green">//&nbsp;Render&nbsp;this&nbsp;button&nbsp;to&nbsp;a&nbsp;element&nbsp;named&nbsp;divContainer</span>
		.ToBasic()&nbsp;<span style="color: green">//&nbsp;We&nbsp;can&nbsp;revert&nbsp;to&nbsp;basic&nbsp;button&nbsp;=)</span>
		.Listeners(&nbsp;<span style="color: green">//&nbsp;and&nbsp;add&nbsp;some&nbsp;javascript&nbsp;listeners</span>
			<span style="color: #2b91af">Listener</span>.On(
				<span style="color: #2b91af">Button</span>.Click,&nbsp;<span style="color: green">//&nbsp;On&nbsp;click...</span>
				<span style="color: #2b91af">Raw</span>.Script(<span style="color: #a31515">&quot;function(){alert(&#39;Button&nbsp;click!&#39;)}&quot;</span>)&nbsp;<span style="color: green">//&nbsp;..do&nbsp;something&nbsp;amazing</span>
			),
			<span style="color: #2b91af">Listener</span>.On(
				<span style="color: #2b91af">AdvancedButton</span>.Render,&nbsp;<span style="color: green">//&nbsp;Advanced&nbsp;events&nbsp;also&nbsp;exists</span>
				<span style="color: #2b91af">Raw</span>.Function(<span style="color: #a31515">&quot;btnSomething_Render&quot;</span>)&nbsp;<span style="color: green">//&nbsp;this&nbsp;time&nbsp;we&nbsp;just&nbsp;call&nbsp;a&nbsp;simple&nbsp;javascript&nbsp;function</span>
			)
		)
	)

&lt;div&nbsp;id=&quot;divContainer&quot;&gt;&lt;/div&gt;
</pre>